<template>
  <div class="studentInfo">
    <div>
      <div class="title">
        <h1 style="color: #4D7181;font-size: 40px">岗位信息</h1>
        <div>
          <CopyOutlined class="icon"/>
          <AppstoreOutlined class="icon"/>
        </div>

      </div>
    </div>
    <div style="border: 2px solid #4D7181; padding: 20px;border-top: 30px solid #4D7181; border-radius: 10px">


      <div style="display: flex">
        <div>
          <a-descriptions :column="2" title="基本信息">
            <a-descriptions-item label="岗位标题">{{ formState.jobTitle }}</a-descriptions-item>
            <a-descriptions-item label="岗位状态">{{ formState.jobStatus }}</a-descriptions-item>
            <a-descriptions-item label="所属公司">{{ formState.jobCompanyName }}</a-descriptions-item>
            <a-descriptions-item label="公司规模">{{ formState.jobCompanySize }}</a-descriptions-item>
            <a-descriptions-item label="岗位薪资">{{ formState.jobSalary }}</a-descriptions-item>
            <a-descriptions-item label="岗位地址">{{ formState.jobLocation }}</a-descriptions-item>
            <a-descriptions-item label="岗位学历要求">{{ formState.jobEducationRequirement }}</a-descriptions-item>
            <a-descriptions-item label="岗位专业要求">{{ formState.jobMajorRequirement }}</a-descriptions-item>
            <a-descriptions-item label="岗位联系方式">{{ formState.jobContactInfo }}</a-descriptions-item>
            <a-descriptions-item label="岗位所属行业">{{ formState.jobIndustry }}</a-descriptions-item>
            <a-descriptions-item label="发布时间">{{ formattedFoundationDate1 }}</a-descriptions-item>
            <a-descriptions-item label="截至时间">{{ formattedFoundationDate2 }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>


      <a-descriptions title="其他信息">
        <a-descriptions-item :span="3" label="岗位经验要求">
          <span v-html="truncateText(formState.jobExperienceRequirement)"></span>
        </a-descriptions-item>
        <a-descriptions-item :span="3" label="岗位技能要求">
          <span v-html="truncateText(formState.jobSkillRequirement)"></span>
        </a-descriptions-item>
        <a-descriptions-item :span="3" label="岗位职责">
          <span v-html="truncateText(formState.jobDescription)"></span>
        </a-descriptions-item>
        <a-descriptions-item :span="3" label="岗位福利">
          <span v-html="truncateText(formState.jobBenefits)"></span>
        </a-descriptions-item>
      </a-descriptions>
    </div>


  </div>

</template>

<script setup>


import {computed, onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {queryStudentByIdAPI} from "@/apis/student.js";
import {message} from "ant-design-vue";
import {CopyOutlined, AppstoreOutlined} from "@ant-design/icons-vue";
import {queryJobByJobIdAPI} from "@/apis/job.js";

// 新增方法用于将回车替换微br空格替换微&nbsp
const truncateText = (text) => {
  return text.replace(/\n/g, '<br>').replace(/ /g, '&nbsp;');
};


const route = useRoute()
//定义数据
const formState = reactive({
  jobId: '',
  jobTitle: '',
  jobCompanyName: '',
  jobCompanySize: '',
  jobSalary: '',
  jobLocation: '',
  jobEducationRequirement: '',
  jobMajorRequirement: '',
  jobContactInfo: '',
  jobIndustry: '',
  jobStatus: '',
  jobPublishDate: '',
  jobDeadline: '',
  jobExperienceRequirement: '',
  jobSkillRequirement: '',
  jobDescription: '',
  jobBenefits: '',
});
//获取数据
const getData = async (jobId) => {
  const res = await queryJobByJobIdAPI(jobId)
  formState.jobId = res.data.data.jobId;
  formState.jobTitle = res.data.data.jobTitle;
  formState.jobCompanyName = res.data.data.jobCompanyName;
  formState.jobCompanySize = res.data.data.jobCompanySize;
  formState.jobSalary = res.data.data.jobSalary;
  formState.jobLocation = res.data.data.jobLocation;
  formState.jobEducationRequirement = res.data.data.jobEducationRequirement;
  formState.jobMajorRequirement = res.data.data.jobMajorRequirement;
  formState.jobContactInfo = res.data.data.jobContactInfo;
  formState.jobIndustry = res.data.data.jobIndustry;
  formState.jobStatus = res.data.data.jobStatus;
  formState.jobPublishDate = res.data.data.jobPublishDate;
  formState.jobDeadline = res.data.data.jobDeadline;
  formState.jobExperienceRequirement = res.data.data.jobExperienceRequirement;
  formState.jobSkillRequirement = res.data.data.jobSkillRequirement;
  formState.jobDescription = res.data.data.jobDescription;
  formState.jobBenefits = res.data.data.jobBenefits;



}

//时间格式处理
const formattedFoundationDate1 = computed(() => {
  const date = new Date(formState.jobPublishDate);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
  const day = String(date.getDate()).padStart(2, '0');
  // const hours = String(date.getHours()).padStart(2, '0');
  // const minutes = String(date.getMinutes()).padStart(2, '0');
  // const seconds = String(date.getSeconds()).padStart(2, '0');
  // return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  return `${year}-${month}-${day}`;
});
const formattedFoundationDate2 = computed(() => {
  const date = new Date(formState.jobDeadline);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1
  const day = String(date.getDate()).padStart(2, '0');
  // const hours = String(date.getHours()).padStart(2, '0');
  // const minutes = String(date.getMinutes()).padStart(2, '0');
  // const seconds = String(date.getSeconds()).padStart(2, '0');
  // return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  return `${year}-${month}-${day}`;
});

//接收路由参数
const jobId = ref();
// 生命周期
onMounted(() => {
  jobId.value = route.params.jobId;
  getData(jobId.value)
});


const success = (msg) => {
  message.success(msg);
};


</script>
<style scoped>
.studentInfo {
  margin: 5px;
  padding: 20px 60px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  border-radius: 30px; /* 你可以调整这个值来改变圆角的大小 */

  .title {
    display: flex;
    justify-content: space-between;

    .icon {
      font-size: 35px;
      padding: 15px;
      color: white;
      margin-right: 20px;
      background-color: #C09E66;
      border-radius: 50px;
      margin-bottom: 10px;
    }
  }

}


</style>